<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        #big {
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        #erwa {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #sanwa {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <!-- w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true -->
    <div id="app">
        <div @click.stop="say('大娃')" id="big">
            <div @click.stop="say('2娃')" id="erwa">
                <div @click.stop="say('3娃')" id="sanwa">
                    <!-- event.preventDefault(); -- 阻止元素的默认事件。 注:a元素的点击跳转的默认事件 , -->
                        <a @click.stop.prevent="say('a')" href="https://tophub.today/">a标签最内部</a>
                </div>
            </div>
        </div>

    </div>


    <script>
   
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue22222!'
            },
            methods:{
                say(n) {
                    console.log(n)
                }
            }
        })

        console.log('app', app)

    </script>
</body>

</html>